<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xzvThyo6PqzT6vbb4GiSGv8d2Z8Eqg5M"
    ></script>
    <style>
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script>
      // 创建地图实例
      var map = new BMapGL.Map('container')

      // 地图的中心点
      var point = new BMapGL.Point(114.085947, 22.547)

      // 设置中心点坐标和缩放级别
      /**
       * 级别越大，实际范围越小，但是表示的范围越清晰
       * 级别越小，实际范围越大，但是表示的范围越宽广
       */
      map.centerAndZoom(point, 15)

      var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
      map.addControl(zoomCtrl)
    </script>
  </body>
</html>
